﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chirpy Chirp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <!--script references-->
    <script src="Scripts/angular.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <script src="Scripts/angles.js"></script>

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="img/favicon-16x16.png">
  
</head>

<body>
    <div class="jumbotron">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="page-header">
                        <h1>
                            Chirp away! <small>Before the squirrels get back!</small>
                        </h1>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-3 column">
                    <img alt="140x140" src="img/lola.jpg" class="img-circle">
                    <br />
                    <h4>Profile</h4>
                    <ul>
                        <a class="glyphicon glyphicon-pencil" href="#" data-toggle="modal" data-target="#myModal" onclick="myChirp.doEdit()"></a>
                        <li id="profile-name"><a ="#"><i class="glyphicon glyphicon-user"></i>Username</a></li>
                        <li id="profile-firebase"><a ="#"><i class="glyphicon glyphicon-user"></i>Firebase</a></li>
                        <li id="profile-city"><a ="#"><i class="glyphicon glyphicon-home"></i>&nbsp;City</a></li>
                    </ul>
                </div>
                <div class="col-md-5 column">
                    <label>Create a chirp!</label>
                    <input id="subject" class="form-control" type="text" name="Subject" value="" placeholder="Subject" />
                    <br />
                    <textarea id="chirpArea" class="form-control" rows="8" placeholder="Enter chirp here"></textarea>
                    <button onclick="myChirp.doPost()" type="button" class="btn btn-default btn-md">CHIRP!</button>
                    <br />
                </div>
                <div id="friendResults" class="col-md-4 column">
                    <table class="table table-bordered table-condensed table-hover">
                        <thead>
                            <tr>
                                <th>
                                    Birdies I follow <a class="glyphicon glyphicon-pencil" href="#" data-toggle="modal" data-target="#myModalFriends"></a>
                                </th>
                            </tr>
                        </thead>
                        <tbody ng-controller="HomeController">
                                <!-- render friends here -->
                            <tr ng-repeat="t in myFriendList">
                                <td>{{t.name}}</td>
                                <td>{{t.firebase}}</td>
                                <td><button ng-click="doEditTask($index)">Edit</button><button ng-click="doDeleteTask($index)">Del</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-bordered table-condensed table-hover col-md-3">
                        <thead>
                            <tr>
                                <th>
                                    Chirps
                                </th>
                            </tr>
                        </thead>
                        <tbody id="chirpsRender">
                                <!-- render chirps here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit Profile</h4>
                </div>
                <br />
                <div class="modal-body">
                    <div class="form-group column col-lg-12">
                        <label for="exampleInputEmail1">Name</label>
                        <input type="email" class="form-control" id="profileName" placeholder="Nickname" />
                    </div>
                    <div class="form-group column col-lg-12">
                        <label for="exampleInputEmail1">Firebase</label>
                        <input type="email" class="form-control" id="profileFirebase" placeholder="Enter Firebase" />
                    </div>
                    <div class="form-group column col-lg-12">
                        <label for="exampleInputEmail1">City</label>
                        <input type="email" class="form-control" id="profileCity" placeholder="Enter city" />
                    </div>
                    <p class="text-center">Edit your profile</p>
                </div>
                <div class="modal-footer">
                    <button id="update-profile" data-dismiss="modal" type="button" class="btn btn-primary" onclick="myChirp.doEditSave()">Update</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </div>
    <!--Modal Fiends Profile-->
    <div ng-controller="HomeController" id="myModalFriends" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Profile</h4>
                </div>
                <br />
                <div class="modal-body">
                    <div id="friendDiv">
                        <div class="form-group column col-lg-12">
                            <label for="exampleInputEmail1">Name</label>
                            <input type="email" class="form-control" ng-model="friendNameInput" placeholder="Buddy's Name" />
                        </div>
                        <div class="form-group column col-lg-12">
                            <label for="exampleInputEmail1">Firebase</label>
                            <input type="email" class="form-control" ng-model="friendFireInput" placeholder="Buddy's Firebase" />
                        </div>
                        <p id="modal-chirp" class="text-center">Add your friends!</p>
                    </div>
                    <div class="modal-footer">
                        <button ng-show="!editMode" data-dismiss="modal" type="button" class="btn btn-primary" onclick="doAddTask()">Follow</button>
                        <button ng-show="editMode" data-dismiss="modal" type="button" class="btn btn-primary" onclick="doEditTask()">Edit</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
</body>
</html>
